<template>
	<view class="form-item">
		<view class="item-title">
			<text v-if='isRequired' class="is-required">*</text>
			<text>{{title}}</text>
		</view>
		<input :value="val" v-if="type=='input'" class="item-input" type="text" :disabled="disabledIpt" :placeholder="placeholder || `请输入${title}`" @input="onInput">
		<input :value="val" v-else-if="type=='number'" class="item-input" type="digit" :disabled="disabledIpt" :placeholder="placeholder || `请输入${title}`" @input="onInput">

		<view v-else-if="type=='text'" style="width: 100%;">
			<text class="message-text">{{message}}</text>
		</view>
		
		<view v-else-if="type=='select'" @click="itemClicked" style="flex: 1;text-align: right;">
			<view class="item-input" style="text-align: right;" v-if="message">{{message}}</view>
			<text v-else class="selected-area">{{placeholder}}</text>
		</view>
		<picker v-else-if="type=='time'" style="flex: 1;" mode="date" :value="date"  @change="bindDateChange">
			<view class="time-area">
				<text :class="ispalceholder?'':'item-input'">{{date}}</text>
				<image class="item-arrow" src="../static/image/arrow.png" mode=""></image>
			</view>
		</picker>
		<UploadFile style='flex: 1;' v-else-if='type=="file"' v-model="val"  @uploadSuccess='change'
			@cancleImage='change' :maxNum="maxNumber"></UploadFile>
		<view >
			<slot></slot>
		</view>
		<view class="item-right" v-if="right">
			<text v-if='type!="select"'>{{right}}</text>
			<image class="item-arrow" v-else src="../static/image/arrow.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import UploadFile from './BaseUploadFile.vue'
	export default {
		name:"FromItem",
		components:{
			UploadFile,
		},
		data() {
			return {
				ispalceholder:true,
				date:'不超过土地承包到期时间',
				val:''
			};
		},
		props:{
			value: [Number, String, Array],
			isRequired:{
				type:Boolean,
				default:false,
			},
			disabledIpt:{
				type:Boolean,
				default:false,
			},
			maxNumber:{
				type:Number,
				default:1,
			},
			title:{
				default:'标题',
				typeof:String
			},
			placeholder:{
				default:'',
				typeof:String
			},
			right:{
				default:'',
				typeof:String
			},
			type:{
				default:'input',
				typeof:String
			},
			message:{
				default:'',
				typeof:String
			}
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		watch: {
			value(newVal) {
				this.val = newVal
				// if (this.type == 'time') {
				// 	this.date = newVal
				// }
			},
		},
		methods: {
			itemClicked() {
				this.$emit('click')
			},
			bindDateChange(e){
				this.date = e.detail.value
				this.ispalceholder = false
				this.$emit("input", e.detail.value);
				this.$emit('change', e.detail.value)
			},
			onInput(event) {
				let value = event.detail.value;
				this.$emit("input", value);
				this.$emit('change', value)
				this.$emit('valueChange', value)
			},
			dataCheckChange(e){
				this.$emit('input',e.detail.value)
				this.$emit('change',e.detail.value)
			},
			dateChange(e) {
				this.date = e.detail.value
				this.$emit('input', this.date)
				this.$emit('change', e.detail.value)
			},
			change(val) {
				this.$emit('input', val)
				this.$emit('change', val)
			},
		},
	}
</script>

<style lang="scss">
.form-item{
	display: flex;
	align-items: center;
	border-bottom: 1rpx solid #E1E0E0;
	min-height: 86rpx;
	justify-content: space-between;
	// white-space: nowrap;
}
.is-required{
	color: red;
	font-size: 26rpx;
}
.item-title{
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
	min-width: 170rpx;
	margin-left: 34rpx;
	margin-right: 40rpx;
}
.item-input{
	flex: 1;
	min-width: 300rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
	text-align: right;
}
.item-right{
	display: flex;
}
.item-arrow{
	// background-image: url(../static/image/arrow.png);
	width: 32rpx;
	height: 32rpx;
}
.text-value{
	font-weight: 400;
	font-size: 28rpx;
	color: #333333;
}
.selected-area{
	font-size: 28rpx;
	color: gray;
	text-align: right;
}
.time-area{
	font-size: 28rpx;
	color: #CCCCCC;
	text-align: right;
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: flex-end;
}
.message-text{
	font-weight: 500;
	font-size: 28rpx;
	color: #333333;
}
</style>